<template>
  <div class="search-box">
    <el-form ref="searchFormRef" :size="size" :disabled="disabled" :inline="inline" :label-width="labelWidth" :label-position="labelPosition"
      :rules="rules" :model="searchData">
      <el-form-item v-for="item in searchForm" :key="item.prop" :label-width="item.labelWidth" :filterable="item.filterable || false"
        :label="item.label" :prop="item.prop" :style="itemStyle">
        <!-- 输入框 Input -->
        <el-input v-if="item.type === 'Input'" v-model="searchData[item.prop]" maxlength="64" :size="size || item.size"
          :placeholder="item.placeholder" :clearable="item.clearable || true" :disabled="item.disabled || false"
          @change="item.change && item.change(searchData[item.prop])" />
        <!-- 数字输入框 Number -->
        <el-input-number v-if="item.type === 'Number'" v-model="searchData[item.prop]" maxlength="64" :size="size || item.size"
          :placeholder="item.placeholder" :clearable="item.clearable || true" :disabled="item.disabled || false"
          @change="item.change && item.change(searchData[item.prop])" />
        <!-- 文本框 -->
        <el-input v-if="item.type === 'Textarea'" v-model="searchData[item.prop]" maxlength="800" type="textarea" :placeholder="item.placeholder"
          :disabled="item.disabled || false" :autosize="{
            minRows: 5,
            maxRows: 10,
          }" />
        <!-- 关键词 -->
        <el-row v-if="item.type === 'TagInput'" class="tag-form-item-inner border" align="middle">
          <el-tag v-for="(tag, index) in searchData[item.prop]" :key="index" class="m-r" size="small" :closable="!disabled"
            :disable-transitions="false" @close="handleClose(item.prop, tag)">{{ tag }}</el-tag>
          <el-input v-if="inputVisible === item.id" ref="saveTagInput" v-model="inputValue" class="input-new-tag" size="small" maxlength="20"
            show-word-limit @keyup.enter.native="handleInputConfirm(item.prop)" @blur="handleInputConfirm(item.prop)" />
          <el-button v-else class="button-new-tag" size="mini" @click="showInput(item.id)">+ 新增</el-button>
        </el-row>
        <!-- 下拉框 Select-->
        <el-select v-if="item.type === 'Select'" v-model="searchData[item.prop]" :size="size || item.size" :placeholder="item.placeholder"
          :multiple="item.multiple || false" :filterable="item.filterable || true" :clearable="item.clearable || true"
          :disabled="item.disabled || false" style="width: 100%" @click.native="item.getData && item.getData(item)"
          @change="item.change && item.change(searchData[item.prop])">
          <el-option v-for="op in item.options" :key="item.params ? op[item.params.value] : op.value"
            :label="item.params ? op[item.params.key] : op.label" :value="item.params ? op[item.params.value] : op.value" />
        </el-select>
        <!-- 级联选择 Cascader-->
        <el-cascader v-if="item.type === 'Cascader'" v-model="searchData[item.prop]" :placeholder="item.placeholder" :options="item.options" :props="{
            multiple: true,
            checkStrictly: item.checkStrictly || false,
            ...item.params,
          }" :filterable="item.filterable || false" :clearable="item.clearable || true" :disabled="item.disabled || false" style="width: 100%"
          @click.native="item.getData && item.getData(item)" @change="item.change && item.change(searchData[item.prop])" />
        <!-- 单选 Radio-->
        <el-radio-group v-if="item.type === 'Radio'" v-model="searchData[item.prop]">
          <el-radio v-for="ra in item.options" :key="ra.value" :disabled="item.disabled || false" :label="ra.value">{{ ra.label }}</el-radio>
        </el-radio-group>
        <!-- 单选按钮 -->
        <el-radio-group v-if="item.type === 'RadioButton'" v-model="searchData[item.prop]"
          @change="item.change && item.change(searchData[item.prop])">
          <el-radio-button v-for="ra in item.options" :key="ra.value" :disabled="item.disabled || false"
            :label="ra.value">{{ ra.label }}</el-radio-button>
        </el-radio-group>
        <!-- 复选框 -->
        <el-checkbox-group v-if="item.type === 'Checkbox'" v-model="searchData[item.prop]">
          <el-checkbox v-for="ch in item.options" :key="ch.value" :disabled="item.disabled || false" :label="ch.value">{{ ch.label }}</el-checkbox>
        </el-checkbox-group>
        <!-- 年 -->
        <el-date-picker v-if="item.type === 'Year'" v-model="searchData[item.prop]" type="year" value-format="yyyy" :placeholder="item.placeholder"
          @change="item.change && item.change(searchData[item.prop])" />
        <!-- 日期 Date-->
        <!-- <el-date-picker
          v-if="item.type === 'Date'"
          v-model="searchData[item.prop]"
          :type="item.dateType || 'date'"
          :placeholder="item.placeholder"
          :value-format="item.format"
          :clearable="item.clearable ? item.clearable : false"
          :disabled="item.disabled || false"
          @change="item.change && item.change(searchData[item.prop])"
          style="width: 100%"
        ></el-date-picker> -->
        <!-- 日期 Date-->
        <el-date-picker v-if="item.type === 'Date'" v-model="searchData[item.prop]" :type="item.dateType || 'date'" :placeholder="item.placeholder"
          value-format="yyyy-MM-dd" :clearable="item.clearable ? item.clearable : false" :disabled="item.disabled || false" style="width: 100%"
          @change="item.change(searchData[item.prop])" />
        <!-- 时间 -->
        <el-time-select v-if="item.type === 'Time'" v-model="searchData[item.prop]" :placeholder="item.placeholder" :disabled="item.disabled || false"
          :clearable="item.clearable ? item.clearable : false" type />
        <!-- 日期时间 -->
        <el-date-picker v-if="item.type === 'DateTime'" v-model="searchData[item.prop]" type="datetime"
          :clearable="item.clearable ? item.clearable : false" :disabled="item.disable && item.disable(searchData[item.prop])" />
        <!-- 滑块 -->
        <!-- <el-slider v-if="item.type==='Slider'" v-model="searchData[item.prop]"></el-slider> -->
        <!-- 开关 Switch-->
        <el-switch v-if="item.type === 'Switch'" v-model="searchData[item.prop]" :disabled="item.disabled || false" />
      </el-form-item>
      <el-form-item v-for="item in searchFormSelectTree" :key="item.prop" :label-width="item.labelWidth" :filterable="item.filterable || false"
        :label="item.label">
        <slot :name="item.prop" :item="item" />
      </el-form-item>
      <el-form-item class="buttons-content">
        <el-button v-for="el in searchHandle" :key="el.label" :type="el.type" :class="`${el.class}` || ''" :size="el.size || size"
          :icon="el.icon || ''" @click="el.handle()">{{ el.label }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'SearchFormIndex',
  props: {
    rules: {
      default: () => ({})
    },
    isHandle: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    inline: {
      type: Boolean,
      default: true
    },
    labelWidth: {
      type: String
      // default: "80px",
    },
    itemStyle: {
      type: String
    },
    labelPosition: {
      type: String,
      default: 'left'
    },
    size: {
      type: String,
      default: sessionStorage.getItem('size')
    },
    searchForm: {
      type: Array,
      default: () => []
    },
    searchHandle: {
      type: Array,
      default: () => []
    },
    searchData: {
      type: Object,
      default: () => { }
    },
    searchFormSelectTree: {
      type: Array,
      default: () => { }
    },
    resourceId: {
      type: [Number, String]
      // default: 0,
    }
  },

  data() {
    return {
      inputVisible: '',
      inputValue: ''
    }
  },
  created() {
    this.searchForm.forEach((item) => {
      if (item.type === 'Cascader') {
        console.log('item', item)
      }
    })
  },
  methods: {
    handleClose(params, tag) {
      this.$bus.$emit('busCloseTags', params, tag)
    },

    showInput(id) {
      if (id) {
        this.inputVisible = id
      }
      this.$nextTick(() => {
        this.$refs.saveTagInput[0].$refs.input.focus()
      })
    },
    handleInputConfirm(params) {
      if (!this.searchData[params]) {
        this.searchData[params] = []
      }
      const inputValue = this.inputValue
      if (inputValue) {
        this.$bus.$emit('busPushTags', params, inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    }
  }
}
</script>
<style lang="less" scoped>
  .search-box {
    .el-form--inline .el-form-item {
      margin-right: 0px;
      ::v-deep .el-form-item__content {
        padding-right: 20px;
      }
    }
  }
  .border {
    padding: 4px 20px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
  }
  .button-new-tag {
    padding: 4px 12px;
  }
</style>
